import React from 'react'
import './ListData.css'
import Scroll from '../../../baseUI/scroll'
import ListItem from './listItem/ListItem'

const ListData = (props) => {
    const { listItems, list } = props
    return (
        <>
            <Scroll
                direction="horizental"
                refresh={true}
            >
                <div className="list">
                    <div className="list-box">
                    {
                        listItems.map((item, index) => {
                            return (
                                <span 
                                    className="list-item"
                                    key={index}
                                    onClick={() => {
                                        handleclick(item)
                                    }}
                                >{item}</span>
                            )
                        })
                    }
                    </div>
                </div>
            </Scroll>
            {
                list.map((item, index) => (
                    <ListItem key={index} item={item} />
                    // <ListItem key={item.id} item={item} />
                ))
            }
        </>
    )
}

export default ListData